<template>
  <div class="poemBox fadeIn transition-all text-center overflow-hidden" @contextmenu.prevent="">
    <span id='poemBg' />
    <p class="sentence">{{ sentence }}</p>
    <p class="author">—— {{ author }}</p>
    <button id='quoteMenuBtn' type='button' title='选项' @click='handleClick'>···</button>
  </div>
  <MenuQuoteModal.Instance />
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useMouse } from '@vueuse/core'
import { oneNote } from "../api/oneNote";
import hoc from "./hoc-modal/hoc";
import MenuQuote from "./ant-modal/menuQuote.vue";
const sentence = ref("今宵酒醒何处？杨柳岸，晓风残月。");
const author = ref("雨霖铃·寒蝉凄切 ");

const MenuQuoteModal = hoc(MenuQuote, {
  mask: false,
  width: "120px",
  destroyOnClose: true,
  closable: false,
  dataDynamic: true,
});

const { x, y } = useMouse();
const handleClick = () => {
  MenuQuoteModal.show({
    mousePosition: {
      top: y.value + 24 + 'px',
      left: x.value - 60 + 'px',
      margin: '0',
    },
  });
}
onMounted(async () => {
  // const res = await oneNote("i");
  // author.value = res.from;
});
</script>

<style lang="scss" scoped>
.poemBox {
  position: absolute;
  bottom: 125px;
  left: 50%;
  transform: translateX(-50%);
  width: 530px;
  padding: 15px 50px;
  border-radius: 15px;
  color: rgba($color: #fff, $alpha: 0.9);
  font-size: small;
  text-align: center;
  cursor: default;
  transition: .5s;

  .sentence {
    text-shadow: 0 0 20px rgba($color: #000, $alpha: .8);
    transition: .25s
  }

  .author {
    opacity: 0;
    margin-top: 8px;
    transition: .25s;
  }

  #quoteMenuBtn {
    opacity: 0;
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 0 10px;
    border: none;
    border-radius: 10px;
    background-color: transparent;
    color: rgba($color: #fff, $alpha: 0.6);
    cursor: pointer;
    transition: .25s;
    line-height: 24px
  }
}

.poemBox {
  p {
    color: var(text-light-300);
  }

  &:hover #poemBg,
  &:hover #quoteMenuBtn,
  &:hover .author {
    opacity: 1;
  }

  &:hover #quoteMenuBtn:hover {
    background-color: rgba($color: #fff, $alpha: .05);
    color: #70C000;
  }

  &:hover #quoteMenuBtn:active {
    background-color: rgba(255, 255, 255, .15);
  }
}

#poemBg {
  transition: all 0.5s;
  z-index: -1;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: rgba($color: #fff, $alpha: 0.05);
  backdrop-filter: blur(30px) saturate(1.25);
}

.fadeIn {
  animation: fade 2s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 70%;
  }
}
</style>
